<template>
  <div
    :class="['left-container', showWidgetLibContainer && 'show']"
    :style="{ width: dragController.leftWidth + 'px' }"
    @click.self="toggleShow"
  >
    <div style="width: 100%; overflow: hidden">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="项目结构" name="pageStructure">
          <PageStructureEditor></PageStructureEditor>
        </el-tab-pane>
        <el-tab-pane label="组件库" name="widgetLib">
          <div class="widget-lib-container"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import PageStructureEditor from "./PageStructureEditor"
export default {
  name: "Left",
  components: {PageStructureEditor},
  props: {
    dragController: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showWidgetLibContainer: true,
      activeName: "pageStructure",
    };
  },
  created() {
    this.dragController.widgetLib.pushComp();
  },
  mounted() {
    this.mountWidgetLibHtml();
  },
  methods: {
    mountWidgetLibHtml() {
      this.dragController.widgetLib.mountWidgetLibHtml(".widget-lib-container");
    },
    toggleShow() {
      this.showWidgetLibContainer = !this.showWidgetLibContainer;
      this.dragController.leftWidth = this.showWidgetLibContainer ? 300 : 0;
    },
  },
  watch: {
    // "$route.path": {
    //   immediate: true,
    //   handler() {
    //     this.mountWidgetLibHtml();
    //   },
    // },
  },
};
</script>

<style>
.left-container {
  box-shadow: 0 0 12px 1px #f1f1f1;
  box-sizing: border-box;
  position: relative;
  pointer-events: none;
}
.left-container::after {
  content: ">";
  width: 24px;
  height: 72px;
  line-height: 72px;
  text-align: center;
  border-radius: 0 8px 8px 0;
  box-shadow: 1px 0 12px 0 #ccc;
  position: absolute;
  top: 50%;
  right: -26px;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
}
.left-container.show::after {
  content: "<";
}
.left-container * {
  pointer-events: auto;
}
.widget-lib-container {
  overflow: hidden;
}
</style>